<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 
        移动端适配 
        meta为元标签，name="viewport"表示对于视图窗口进行的设置
        content="width=device-width, initial-scale=1.0,user-scalable=no"
        width=device-width页面宽度等于设备宽高，initial-scale=1.0初始缩放比为1表示不缩放，user-scalable=no禁止用户手动缩放
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
    <!-- 项目图标link:favicon -->
    <link rel="shortcut icon" href="https://img1.baidu.com/it/u=731710723,581112950&fm=26&fmt=auto" type="image/x-icon">
    <!-- 项目网页标题 -->
    <title>小U课堂</title>
    <!-- 1.引入响应插件 -->
    <script src="libs/flexible.js"></script>
    <!-- 2.引入css初始化插件 -->
    <link rel="stylesheet" href="libs/reset.css">
    <!-- 3.引入首页的样式文件index.css -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 4.引入阿里巴巴矢量图标库线上链接 -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2994499_hsdv3fhhgrb.css">
    <!-- 5.引入轮播图样式插件 -->
    <link rel="stylesheet" href="libs/swiper.min.css">
</head>
<body>
    <!-- 
        知识点 
        1.元素类名尽量遵循语义化原则
    -->
    <!-- 上--顶部导航 -->
    <div class="header">
        <!-- 左-位置定位 -->
        <div>
            <!-- 左侧描述文本 -->
            <div>
                <p>北京</p>
                <span>朝阳区</span>
            </div>
            <!-- 右侧--下拉箭头 -->
            <i class="iconfont icon-xiajiantou"></i>
        </div>
        <!-- 中--输入框 -->
        <div>
            <i class="iconfont icon-chaxun"></i>
            <!-- readonly只读属性 -->
            <input type="text" placeholder="寻找感兴趣的课程或练习" readonly>
        </div>
        <!-- 右--年级选择 -->
        <div>
            <span>高三</span>
            <i class="iconfont icon-xiajiantou"></i>
        </div>
    </div>
    <!-- 中-主要内容区 -->
    <div class="main">
        <!-- 1.轮播图banner -->
        <div class="banner">
            <!-- 复制的模板代码 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="https://img0.baidu.com/it/u=1092917708,2029853581&fm=26&fmt=auto" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://img2.baidu.com/it/u=2935886211,2741692469&fm=26&fmt=auto" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://img1.baidu.com/it/u=2667878651,2072962712&fm=26&fmt=auto" alt="">
                    </div>
                </div>
                <!-- 焦点/分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!-- 2.选项列表 -->
        <div class="select_list">
            <div class="wrapper">
                <ul>
                    <li>
                        <a href="#">
                            <img src="imgs/selfsupport.png" alt="">
                            <p>学科</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="imgs/selfsupport.png" alt="">
                            <p>学科</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="imgs/selfsupport.png" alt="">
                            <p>学科</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="imgs/selfsupport.png" alt="">
                            <p>学科</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="imgs/selfsupport.png" alt="">
                            <p>学科</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="imgs/selfsupport.png" alt="">
                            <p>学科</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="imgs/selfsupport.png" alt="">
                            <p>学科</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="imgs/selfsupport.png" alt="">
                            <p>学科</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="imgs/selfsupport.png" alt="">
                            <p>学科</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="imgs/selfsupport.png" alt="">
                            <p>学科</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 3.广告 -->
        <a class="ad" href="#">
            <img src="imgs/slide.png" alt="">
        </a>
        <!-- 4.同步课程 -->
        <div class="sync_class">
            <!-- 上-标题 -->
            <div class="title">
                <h3>同步课程</h3>
                <a href="#">更多</a>
            </div>
            <!-- 下-内容 -->
            <div class="content">
                <!-- 图片信息 -->
                <img src="imgs/首页_03.png" alt="">
                <!-- 底部信息描述区域 -->
                <div>
                    <!-- 左侧 -->
                    <div>
                        <h2>一节课让你记住所有的历史朝代，唐宋元明清</h2>
                        <span>12</span>
                        <span>课时</span>
                    </div>
                    <!-- 右侧 -->
                    <button>免费试学</button>
                </div>
            </div>
        </div>
        <!-- 5.在线课程 -->
        <!-- 6.刷新标识 -->
        <div class="refresh">
            <div></div>
            <p>课程丰富，学海无涯，</p>
            <a href="#">刷新试试</a>
            <div></div>
        </div>
    </div>
    <!-- 下-底部导航 -->
    <div class="footer">
        <ul>
            <li>
                <a href="index.html" class="active">
                    <i class="iconfont icon-31shouyexuanzhong"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-kecheng-"></i>
                    <p>课程</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-shiti"></i>
                    <p>试题</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-31wode"></i>
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </div>
    <!-- 6.引入轮播图脚本/功能插件 -->
    <script src="libs/swiper.min.js"></script>
    <!-- 7.激活产品/插件 -->
    <script>
        var swiper = new Swiper('.swiper-container',
            {
                autoplay : 3000,//表示开启自动播放，每5000ms即5s自动切换
                loop:true,//开启循环模式，实现无缝滚动切换
                effect:'coverflow',//切换效果默认为"slide"（位移切换），可设置为"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）
                autoplayDisableOnInteraction : false,//设置用户在手动切换后是否禁止自动播放
                pagination : '.swiper-pagination',//激活焦点/分页器
            }
        );
    </script>
</body>
</html>